<template>
	<view class="main">
		<view class="card">
			<view class="time">
				{{topData.jobStartTime}}
			</view>
			<view class="title">
				<view class="base_icon zhouqi" :class="{'zhouqi':topData.jobType == 2,'dingshi':topData.jobType == 1}">
					{{topData.jobType == 1 ? '定时' : '周期'}}
				</view>
				<view class="title_right">
					{{topData.jobName}}
				</view>
			</view>
			<view class="content">
				{{topData.jobContent}}
			</view>
		</view>
		<view class="text_area">
			<view class="input_txt">
				<u-input v-model="value" :maxlength="maxlength" :placeholder="placeholder" :type="type" :border="border"
					:height="height" :auto-height="autoHeight" />
			</view>
			<view class="count">
				{{value.length}}/{{maxlength}}
			</view>
		</view>
		<go-nav></go-nav>
		<bottom-button @confirm="confirm" :inactive="inactive"></bottom-button>
	</view>
</template>

<script>
	import {
		deleteFollowupJob,
		getFollowupPlanJobByPlanId
	} from '@/api/index.js'
	export default {
		data() {
			return {
				value: '',
				type: 'textarea',
				border: false,
				height: 400,
				autoHeight: true,
				maxlength: 300,
				inactive: true,
				placeholder: '请输入任务删除原因',
				id: '',
				planId:''
			};
		},
		onLoad(obj) {
			if (obj.id) this.id = obj.id
			if(obj.planId) this.planId = obj.planId
		},
		computed: {
			topData() { //vuex寸的计划任务，删除使用 //所选任务
				let arr = this.$store.state.doc.JobList
				let res = arr.filter(v => v.id == this.id)
				return res[0]
			}
		},
		watch: {
			value(ne) {
				if (ne.length > 0) {
					this.inactive = false
				} else {
					this.inactive = true
				}
			}
		},
		methods: {
			async getRuleList(){
				let res = await getFollowupPlanJobByPlanId(this.planId)
				if(res.code == 200){
					this.$store.commit('SHOWJOBLISTALL',res.data)
				}else{
					this.$u.toast(res.msg)
				}
			},
			async confirm(e) {
				if (!e) { //填写才能提交
					let params = {
						id: this.id,
						taskDeleteDesc: this.value
					}
					let res = await deleteFollowupJob(params)
					if (res.code == 200) {
						this.$u.toast('删除成功', 2000)
						setTimeout(() => {
							this.getRuleList()
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}else{
						this.$u.toast(res.msg,2500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f8f8f8;
		min-height: 100vh;
		width: 100%;
		position: absolute;

		.card {
			margin: 24rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding-bottom: 24rpx;

			.time {
				padding: 24rpx 0 12rpx 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
			}

			.title {
				display: flex;
				padding: 0 24rpx;
				align-items: center;

				.title_right {
					font-weight: bold;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
					padding-left: 10rpx;
				}

				// .timing {
				// 	display: flex;
				// 	//align-items: center;
				// 	justify-content: center;
				// 	font-weight: 500;
				// 	font-size: 24rpx;
				// 	color: #FFFFFF;
				// 	//line-height: 3rpx;
				// 	width: 60rpx;
				// 	height: 34rpx;
				// 	background: #4DC0D9;
				// 	border-radius: 8rpx;
				// }
				.base_icon {
					padding: 4rpx 6rpx 6rpx 6rpx;
					width: 70rpx;
					height: 40rpx;
					background: #FF8D07;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 28rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.zhouqi {
					background: #FF8D07;
				}

				.dingshi {
					background-color: #4DC0D9;
				}
			}

			.content {
				width: 654rpx;
				height: 80rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				padding-top: 10rpx;
				padding-left: 24rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.text_area {
			margin: 20rpx 24rpx 0 24rpx;
			background-color: white;
			border-radius: 20rpx;
			position: relative;

			.input_txt {
				padding: 24rpx 0 30rpx 24rpx;
			}

			.count {
				position: absolute;
				bottom: 0;
				right: 30rpx;
				padding-bottom: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #C1C1C1;
				line-height: 33rpx;
			}
		}
	}
</style>